<template>
    <div class="trend-tab2">
            <p class="g-unit">收入: 万元，用户数: 万户</p>
           <div class="tableBox">
            <el-table
                v-loading="tableLoading1"
                :data="tableData1"
                height="85vh"
                style="width: 100%"
                class="tableTh28"
                border
                stripe
                :span-method="arraySpanMethod"
                ref="table"
            >
                <el-table-column
                    fixed
                    label="类别"
                    prop="class1"
                    class-name="first-title"
                    min-width="40"
                ></el-table-column>
                 <el-table-column
                    fixed
                    label="类别"
                    prop="class2"
                    class-name="second-title"
                    min-width="50"
                ></el-table-column>
                 <el-table-column
                    fixed
                    label="类别"
                    prop="verticalIndexName"
                    class-name="third-title"
                    min-width="120"
                ></el-table-column>
                <el-table-column  label="收入">
                    <el-table-column prop="HP042001" min-width="100" label="2019年"></el-table-column>
                    <el-table-column label="2020年">
                            <el-table-column label="预算目标" min-width="100" prop="HP042002"></el-table-column>
                            <el-table-column label="1-11月累计完成" min-width="120" prop="HP042003"></el-table-column>
                            <el-table-column label="全年预计" min-width="100" prop="HP042004"></el-table-column>
                            <el-table-column label="同比(%)" min-width="100" prop="HP042005"></el-table-column>
                            <el-table-column label="预算偏差" min-width="100" prop="HP042006"></el-table-column>
                    </el-table-column>
                    <el-table-column label="2021年">
                        <el-table-column label="预算值" prop="HP042007"></el-table-column>
                        <el-table-column label="同比(%)" prop="HP042008"></el-table-column>
                        <el-table-column label="拉动(%)" prop="HP042009"></el-table-column>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="用户/套餐（万户）">
                    <el-table-column label="2019年">
                        <el-table-column prop="HP042010" min-width="100" label="期末用户数"></el-table-column>
                        <el-table-column prop="HP042011" min-width="100" label="净增用户数"></el-table-column>
                        <el-table-column prop="HP042012" min-width="100" label="离网用户数"></el-table-column>
                        <el-table-column prop="HP042013" min-width="100" label="新增用户数"></el-table-column>
                    </el-table-column>
                    
                    <el-table-column label="2020年">
                        <el-table-column label="1-11月">
                            <el-table-column prop="HP042014" min-width="100" label="期末用户数"></el-table-column>
                            <el-table-column prop="HP042015" min-width="100" label="净增用户数"></el-table-column>
                            <el-table-column prop="HP042016" min-width="100" label="离网用户数"></el-table-column>
                            <el-table-column prop="HP042017" min-width="100" label="新增用户数"></el-table-column>
                        </el-table-column>
                        <el-table-column label="全年">
                            <el-table-column prop="HP042018" min-width="100" label="期末用户数"></el-table-column>
                            <el-table-column prop="HP042019" min-width="100" label="净增用户数"></el-table-column>
                            <el-table-column prop="HP042020" min-width="100" label="离网用户数"></el-table-column>
                            <el-table-column prop="HP042021" min-width="100" label="新增用户数"></el-table-column>
                        </el-table-column>
                    </el-table-column>
                     <el-table-column label="2021年">
                            <el-table-column prop="HP042022" min-width="100" label="期末用户数"></el-table-column>
                            <el-table-column prop="HP042023" min-width="100" label="净增用户数"></el-table-column>
                            <el-table-column prop="HP042024" min-width="100" label="离网用户数"></el-table-column>
                            <el-table-column prop="HP042025" min-width="100" label="新增用户数"></el-table-column>
                    </el-table-column>
                </el-table-column>

                <el-table-column label="ARPU值">
                    <el-table-column prop="HP042026" label="2019年"></el-table-column>
                    <el-table-column label="2020年">
                        <el-table-column prop="HP042027" label="1-11月"></el-table-column>
                        <el-table-column prop="HP042028" label="全年"></el-table-column>
                    </el-table-column>
                     <el-table-column prop="HP042029" label="2021年"></el-table-column>
                </el-table-column>
             
            </el-table>
        </div>
    </div>
</template>

<script>
    import prefixAPI from "@/api/prefixAPI";
    import { getCookie } from "@/common/js/cookie";
    import { getSessionStorage } from "@/common/js/storage";
    import { $budgetAPI } from "@/api";
    import { mergeSpan } from "@/utils/mixin";
    export default {
        props: ['rowData', 'colData'],
        data() {
            return {
                tableLoading1: false,
                tableData1: [],
                titles1: [],
                spanArr: null,
            }
        },
        methods: {
           arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0  || columnIndex == 1 || columnIndex == 2) {
                return this.spanArr && this.spanArr[rowIndex][columnIndex];
            }
        },
            init() {
                var that = this;

                that.spanArr = mergeSpan(that.rowData[0], [
                    "class1",
                    "class2",
                    "verticalIndexName"
                ]);
                
                that.titles1 = that.colData;
                that.tableData1 = that.rowData[0];
                that.tableLoading1 = false;
            }
        },
        
    }
</script>

<style lang="scss">
.trend-tab2 {
  .first-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
      height: 23px;
    }
  }
  .second-title.is-leaf {
    position: relative;
    border-right: 1px solid #d7e5fb !important;
    .cell {
      color: #d7e5fb;
        height: 23px;
    }
  }
  .third-title.is-leaf {
    overflow: visible;
    .cell {
        transform: translateX(-40%);
    }
  }
  
}
</style>